<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>录入文章</title>
    <style type="text/css">
    .app-container{
        width: 70%;
        margin: 30px auto;
    }
    </style>
</head>
<body>
<div class="app-container">

<form role='form'>

    <div class="form-group" style="width: 40%;">
        <label for="title">文章标题</label>
        <input  id='title' type="text"  value="" class="form-control"  placeholder="请输入文章标题">
      </div>

    <div class="form-group" style="width: 40%;">
        <label for="name">请选择文章分类</label>
        <select class="form-control" id='tag'>
            <option value=''>选择分类</option>
            <option value='常见问题'>常见问题</option>
            <option value='税收优惠'>税收优惠</option>
            <option value='公司注册'>公司注册</option>
            <option value='个人独资'>个人独资</option>
        </select>
    </div>

    <input id="timestamp" type="hidden" value="" placeholder="请输入发表时间"/>
    <div class="test">
        <div class="form-group">
            <label for="name">文章内容</label>
            <textarea id="content" placeholder="请输入文章内容" class="form-control" rows="10"></textarea>
        </div>
      </div>


      <div class="form-group" style="text-align: center;">
      <button type="button" onclick="add()" class="btn btn-primary" style="margin-right: 30px;">保存</button>
      <button type="button" class="btn btn-default" onclick="export_data()">导出</button>
     </div>


</form>
<script type="application/javascript">
    function add() {
        var url = '/api/article/add';


        var post_data = {
            'title': $('#title').val(),
            'tag': $('#tag').val(),
            'timestamp': $('#timestamp').val(),
            'content': $('#content').val()
        };

        $.ajax(
                {
                    type: 'post',
                    url: url,
                    data: JSON.stringify(post_data),
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            alert(data.message);
                            window.location.reload()
                        }
                    }
                }
        )


    };

    function export_data() {
        var url = '/api/article/export';
        $.ajax(
                {
                    type: 'post',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            alert(data.message);
                             var a = document.createElement('a');
                             var event = new MouseEvent('click')
                             a.download = data.data.result
                            a.href = '/' + a.download
                            a.dispatchEvent(event)
                            window.location.reload()
                        }
                    }
                }
        )


    }
</script>
</div>
</body>
</html>
